@import "./scss/_funvar.scss";
@import "./scss/_home.scss";
@import "./scss/_khlb.scss";
@import "./scss/_khxq.scss";

@import "./scss/_contract_form.scss";


.wdsy-header-avatar {
    min-height: px2rem(210px);
    padding: px2rem(45px) px2rem(30px);
    background: #fff;
    border-bottom: 1px solid #e5e5e5;

    .avatar {
        float: left;
        width: px2rem(120px);
        height: px2rem(120px);
        line-height: px2rem(120px);
        overflow: hidden;
        border: 1px solid #e4e4e4;
        border-radius: 100%;
        text-align: center;
        margin-right: px2rem(20px);

        img {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .car-name {
        color: #333333;
        font-size: px2rem(36px);
        margin-top: px2rem(10px);
        line-height: px2rem(120px);
    }

}

.wdsy-list {
    border-bottom: 1px solid #e5e5e5;
    padding: 0 px2rem(30px);
    margin-bottom: px2rem(150px);

    li {
        height: px2rem(89px);
        line-height: px2rem(88px);
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        padding-left: px2rem(185px);

        &:last-child {
            border-bottom: none;
        }

        .lab {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
            color: #999999;
            font-size: px2rem(28px);
        }

        .para-val {
            color: #333333;
            font-size: px2rem(28px);
        }
    }
}


// ********************************************

.page-upload-gczl {
    padding: 0 px2rem(30px) px2rem(60px);

    .caption-1 {
        padding: px2rem(40px) 0 px2rem(20px);

        .tit {
            color: #333333;
            font-weight: bold;
            font-size: px2rem(32px);
            float: left;
        }

        .case-tip {
            float: right;
            color: #f69125;
            font-size: px2rem(22px);

            i {
                font-size: px2rem(28px);
                line-height: px2rem(28px);
                display: inline-block;
                vertical-align: middle;
                color: #f69125;
                margin-right: px2rem(8px);
            }
        }
    }

    .item-cph {
        position: relative;
     
        border-bottom: 1px solid #c6c6c6;
        font-size: 0;
        padding: 0 0  0 px2rem(100px);
        overflow:hidden;


        .lab {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
            color: #333333;
            font-size: px2rem(30px);
        }

        .ipt-cph {
            width: 100%;
            border: none;

            font-size: px2rem(30px);
            
           
            padding: px2rem(17px) 0;
           
            overflow:hidden;

        }
    }

    .upload-default {
        width: px2rem(690px);
        height: px2rem(200px);
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
        background: url("../images/upload_bg_1.png") no-repeat top center;
        background-size: 100% 100%;
        display: block;

        &.disabled {
            display: none;
        }

        input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

    }


    .upload-gczl {
        height: px2rem(200px);
        overflow:hidden;
        li {
            border: 1px dashed #d0d0d0;
            height: px2rem(200px);
            line-height: px2rem(200px);
            text-align: center;

            img {
                max-width: 100% !important;
                max-height: 100% !important;
            }
        }
    }


    

    .upload-haspic {
        position: relative;
        height: px2rem(200px);

        .pic {
            border: 1px solid #d0d0d0;

            height: px2rem(200px);
            line-height: px2rem(200px);
            text-align: center;

            img {
                max-width: 100% !important;
                max-height: 100% !important;
            }

        }

        .tip {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: px2rem(45px);
            line-height: px2rem(45px);
            text-align: center;
            font-size: px2rem(26px);
            color: #fff;

        }

        .reupload {
            display: none;
            position: absolute;
            left: 50%;
            top: 42%;
            width: px2rem(90px);
            height: px2rem(90px);
            overflow: hidden;
            line-height: px2rem(90px);
            text-align: center;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 100%;
            transform: translate(-50%, -50%);
            font-size:0;

            i {
                font-size: px2rem(56px);
                color: #fff;
            }

            &.disabled {
                display: none !important;
            }
        }



        &.auditing {

            .tip {
                background: rgba(130, 205, 75, 0.8);
            }
        }

        &.fail {
            .reupload {
                display: block;
            }

            .tip {
                background: rgba(241, 74, 74, 0.8);
            }

        }

        &.success {
            .tip {
                display: none;
            }
        }



        .upload-gczl {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }


    }
}

// ********************************************

.page-contract-result {
    padding-top: px2rem(60px);

    .tit-1 {
        padding-top: px2rem(75px);
        text-align: center;
        font-size: px2rem(36px);
        color: #333333;
    }

    .tip-1 {
        color: #999999;
        display: block;
        font-size: px2rem(28px);
        text-align: center;
        margin-top: px2rem(25px);
        margin-bottom: px2rem(150px);
    }
}

.page-contract-result-ft {
    width: px2rem(414px);
    height: px2rem(48px);
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 5%;
    background: url("../images/logo_1.png") no-repeat top center;
    background-size: 100% 100%;
}

// ********************************************
.page-carseller-search {
    position: fixed;

    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: #fff;
    display: none;
    padding-top: px2rem(130px);

    visibility: hidden;

    .search-wrapper {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .search-scroll {
        position: relative;

        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
    }

    .sec-seach-wrap {
        padding: px2rem(30px) px2rem(135px) px2rem(30px) px2rem(30px);
        background: #f7f7f7;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;


        .cancel-btn {
            position: absolute;
            right: 0;
            top: 50%;
            padding: 0 px2rem(30px);
            height: px2rem(62px);
            line-height: px2rem(62px);

            color: #666666;
            font-size: px2rem(30px);
            transform: translate(0, -50%);

        }
    }

    .sec-search {
        font-size: 0;
        border: 1px solid #e5e5e5;
        position: relative;

        background: #fff;
        padding: 0 0 0 px2rem(65px);

        i {
            position: absolute;
            left: px2rem(15px);
            top: 56%;
            color: #cccccc;
            font-size: px2rem(34px);
            transform: translate(0, -50%);

        }

        .ipt-search {
            border: none;
            background: none;
            
            padding: px2rem(15px) 0;
            font-size: px2rem(28px);
        }

        .ipt-submit {
            position: absolute;
            right: 0;
            top: 0;
            height: px2rem(65px);
            border: none;
            border-radius: 0;
            padding: 0 px2rem(35px);
            font-size: px2rem(30px);
            color: #fff;
            background: #f69125;

        }
    }



    .search-list {
        padding: 0 px2rem(30px) px2rem(30px);

        li {
            &:last-child {
                a {
                    border-bottom: none;
                }
            }

            a {
                display: block;
                height: px2rem(88px);
                line-height: px2rem(88px);
                border-bottom: 1px solid #e5e5e5;
                color: #333333;
                font-size: px2rem(30px);
            }
        }
    }

}


// *********************************************
.page-sign-body {
    height: 100%;
}

.page-ht-qy {
    .sec-fm {
        margin: px2rem(30px);
        width: px2rem(691px);

        height: px2rem(515px);
        overflow: hidden;
        border: px2rem(13px) solid #fe9e38;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .sec-qm-check {
        padding: px2rem(10px) px2rem(30px) 0;
        border-top: 1px solid #e5e5e5;

        .soma-hd {
            padding: px2rem(20px) 0;

            .tit {
                float: left;
                font-size: px2rem(28px);
            }

            a {
                display: none;
                float: right;
                color: #f69125;
                font-size: px2rem(28px);
            }
        }

        .soma-bd {
            height: px2rem(267px);
            border: 1px solid #e5e5e5;
            text-align: center;
            position: relative;

            .tip-1 {
                display: block;
                line-height: px2rem(265px);
                height: 100%;

                color: #c5c5c5;
                text-align: center;
                font-size: px2rem(26px);
            }

            .img-sign {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                max-width: 100%;
                max-height: 100%;
            }
        }

    }
}


// ********************************************


.page-ht-signing {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: #fff;
    display: none;

    visibility: hidden;

    .close-btn {
        color: #8497b2;
        font-size: px2rem(40px);
        height: px2rem(86px);
        width: px2rem(175px);
        text-align: center;
        border-radius: px2rem(10px);
        background: #fff;
        border: 1px solid #e5e5e5;
        line-height: px2rem(86px);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .sec-canvas {}

    .ft-handle {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fbfbfb;
        padding: 0 px2rem(20px);
        height: px2rem(110px);
        border-top: 1px dashed #cccccc;

        .clear-btn {
            float: left;
            margin-top: px2rem(10px);
            color: #02d000;
            font-size: px2rem(40px);
            height: px2rem(86px);
            width: px2rem(175px);
            text-align: center;
            border-radius: px2rem(10px);
            background: #fff;
            border: 1px solid #dfdfdf;
            line-height: px2rem(86px);
        }

        .confirm-btm {
            float: right;
            margin-top: px2rem(10px);
            color: #fff;
            font-size: px2rem(40px);
            height: px2rem(86px);
            width: px2rem(175px);
            text-align: center;
            border-radius: px2rem(10px);
            background: #f69125;

            line-height: px2rem(86px);
        }
    }

}


// ********************************************

.page-sign-result {
    padding-top: px2rem(60px);

    .tit-1 {
        padding-top: px2rem(75px);
        text-align: center;
        font-size: px2rem(36px);
        color: #333333;
    }

    .tip-1 {
        color: #999999;
        display: block;
        font-size: px2rem(28px);
        text-align: center;
        margin-top: px2rem(25px);
        margin-bottom: px2rem(150px);
    }

    .list {
        padding: 0 px2rem(30px);
        display: flex;

        li {
            flex: 1;
            padding: 0 px2rem(30px);

            .gohome {
                color: #f69125;
            }
        }
    }
}

.page-sign-result-ft {
    width: px2rem(414px);
    height: px2rem(48px);
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 5%;
    background: url("../images/logo_1.png") no-repeat top center;
    background-size: 100% 100%;
}

.page-xsht-detail{
    padding-bottom:px2rem(150px);
    
         *{
            max-width:100% !important;
            text-align:center;
        }
}


.page-xsht-com-ftbtn{
    position:fixed;
    left:0;
    box-shadow: 0 0 10px #e5e5e5; 
    right:0;
    bottom:0;
    padding:px2rem(20px) px2rem(30px); 
    background:#fff;
}